<template>
    <div class="BlindBox">
        <!-- 头部 -->
        <!-- <div class="header">
            <div class="header_box">
                <span class="header_reture"> <img src="../../../assets/img/public/reture_black.png" alt=""> </span>
                <div>打卡挑战</div>
                <span class="header_rule">
                    <span @click="getrules">规则</span>
                </span>
            </div>
        </div> -->
        <head-view></head-view>

        
        <div class="top"></div>
        <!--  -->
        <div class="content">
            <h5 class="content_tit">抽华为P40手机送现金</h5>
            <!-- 广播 -->
            <div class="radio" ref='row'>
                <span class="radio_icon"><img src="../../../assets/img/public/radio.png" alt=""></span>
               <div class="radio_box" :class="{anim:animate==true}">
                   
                    <p v-for="i in list1" :key="i.index">
                        <!-- <span>s</span> -->
                        <span>{{i.name}}</span>
                        <span>{{i.name}}</span>
                    </p>
               </div>
            </div>
            <!-- 九宫格 -->
            <div class="LuckyDraw">
                <div class="Lucky_content">
                    <div class="top-warp">
                        <div v-for="i in levelStyle" :key="i.index" :class="i"></div>
                    </div>
                    <div class="right-warp">
                        <div v-for="i in verticalStyle" :key="i.index" :class="i"></div>
                    </div>
                    <div class="bottom-warp">
                        <div v-for="i in levelStyle" :key="i.index" :class="i"></div>
                    </div>
                    <div class="left-warp">
                        <div v-for="i in verticalStyle" :key="i.index" :class="i"></div>
                    </div>
                    <div class="Luck_box" :class="click==false?'on':''">
                            <ul>
                                <li v-for="(item,i) in list" :key="item.index" :class="i==index?'on':(click===false?'off':'')">
                                <div class="box">
                                    <p><img :src="item.img" alt=""></p>
                                    <p>{{item.title}}</p>
                                </div>
                                </li>
                            </ul>
                            <div class="start" :class="click==false?'on':''" @click="startLottery">
                                <p>抽奖</p>
                                <p>还剩0次</p>
                            </div>
                            <!-- <div class="stop">
                                <div>看视频插队</div>
                                <div><img src="../../../assets/img/BlindBox/blind_video.png" alt=""></div>
                                <div>000000</div>
                            </div> -->
                          
                    </div>
                </div>
            </div>
            <!-- 进度条 -->
            <div class="progress">
                <div class="img_warp"><img src="../../../assets/img/ClockIn/gold.png" alt="">
                </div>
                <div class="card_warp">
                    <div class="progress_bar">
                        <p v-bind:style="{width: health+'%'}"></p>
                        <!-- <p></p> -->
                    </div>
                    <p class="progres_message">
                        <span>*0/</span>
                        <span class="address">请填写收货地址</span>
                    </p>
                </div>
                <div class="prize" v-if="showToast">
                    <div class="prize_box">
                       <div></div>
                       <p>sssssssaaaa</p>
                    </div> 
                   <div @click="closePrize"><img src="../../../assets/img/public/close.png" alt=""></div>
                </div>
            </div>
            <!-- 温馨提示 -->
            <div class="prompt">
                <h5>温馨提示</h5>
                <div class="prompt_content">
                   ssssssss
                    
                </div>
            </div>
        </div>
        <div class="rule" v-if="rule_on">
            <div class="rule_box">
                 <div>
                   <h5>规则说明</h5>
                    <p>asdsadsdsada00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd00000000000000sdsadasdddadaadsdassadsa789</p>
                </div>
                
                <div class="close"  @click="close">我知道了</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                
                levelStyle:["single","double","single","double","single","double","single","double","single","double","single"],
                levelStyle1:["double","single","double","single","double","single","double","single","double","single","double"],
                verticalStyle:["double","single","double","single","double","single","double","single","double"],
                verticalStyle1:["single","double","single","double","single","double","single","double","single"],
                // timer:'',  
                list: [{
                        img: require('../../../assets/img/ClockIn/gold.png'),
                        title: '谢谢参与'
                    },
                    {
                        // img: require('./assets/j2.png'),
                        title: '美女一个'
                    },
                    {
                        // img: require('./assets/j1.png'),
                        title: '宝马一辆'
                    },
                    {
                        // img: require('./assets/j2.png'),
                        title: '单车一辆'
                    },
                    {
                        // img: require('./assets/j1.png'),
                        title: '鸡蛋一蓝'
                    },
                    {
                        // img: require('./assets/j2.png'),
                        title: '500红包'
                    },
                    {
                        // img: require('./assets/j1.png'),
                        title: '靓号一个'
                    },
                    {
                        // img: require('./assets/j2.png'),
                        title: '鲜花一蓝'
                    }
                ], //奖品1-9   
                list1:[
                        {name:"马云"},
                        {name:"雷军"},
                        {name:"王勤"},
                        {name:"马云1"},
                        {name:"雷军1"},
                        {name:"王勤1"}
                    ],
                isStart: 1,
                index: 0, // 当前转动到哪个位置，起点位置
                count: 8, // 总共有多少个位置
                timer: 0, // 每次转动定时器
                speed: 200, // 初始转动速度
                times: 0, // 转动次数
                cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize: -1, // 中奖位置
                click: true,//标识是否处于抽奖状态
                showToast: false, //显示中奖弹窗    
                health:50, //进度条
                rule_on:false,
                timeid:0,
                scHeught:0, //滚动高度
                rowTime:0,
                radioHeight:1,
                animate:false,
               
                
                
            }
        },
        
        created(){
            this.get()
        },
        mounted(){
             this.rowTime = setInterval(()=>{
                this.animate=true;
                setTimeout(()=>{     
                    this.list1.push(this.list1[0]);  // 将数组的第一个元素添加到数组的
                    this.list1.shift();     //删除数组的第一个元素
                    this.animate=false;     
                },500)
             },3000)
            
        },
        
        methods: {
            
            get() {
                let l1 = JSON.parse(JSON.stringify(this.levelStyle))
                let l2 = this.levelStyle1
                let v1 = JSON.parse(JSON.stringify(this.verticalStyle))
                let v2 = this.verticalStyle1
                let falg = false
                this.timeid = setInterval(()=>{
                    if(falg) {
                        this.levelStyle = l1
                        this.verticalStyle = v1
                    } else {
                        this.levelStyle = l2
                        this.verticalStyle = v2
                    }
                    falg = !falg
                },1000)
            },
            //抽奖方法
            startLottery() {
                if (!this.click) {
                    return
                }
                this.click = false //防抖
                // console.log(this.click)
                this.startRoll();
            },
            // 开始转动
            startRoll() {
                this.times += 1 // 转动次数
                this.oneRoll() // 转动过程调用的每一次转动方法，这里是第一次调用初始化 
                // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
                if (this.times > this.cycle + 10 && this.prize === this.index) {
                    clearTimeout(this.timer) // 清除转动定时器，停止转动
                    this.prize = -1
                    this.times = 0
                    this.speed = 200
                    this.click = true;
                    var that = this;
                    setTimeout(() => {
                        that.showToast = true;
                    }, 500)
                } else {
                    if (this.times < this.cycle) {
                        this.speed -= 10 // 加快转动速度
                    } else if (this.times === this.cycle) {
                        const index = parseInt(Math.random() * 10, 0) || 0; // 随机获得一个中奖位置
                        console.log(index)
                        this.prize = index; //中奖位置,可由后台返回 
                        if (this.prize > 7) {
                            this.prize = 7
                        }
                    } else if (this.times > this.cycle + 10 && ((this.prize === 0 && this.index === 7) || this.prize === this.index +
                            1)) {
                        this.speed += 110
                    } else {
                        this.speed += 20
                    }
                    if (this.speed < 40) {
                        this.speed = 40
                    }
                    this.timer = setTimeout(this.startRoll, this.speed)
                }
            },

            // 每一次转动
            oneRoll() {
                let index = this.index // 当前转动到哪个位置
                const count = this.count // 总共有多少个位置
                index += 1
                if (index > count - 1) {
                    index = 0
                }
                this.index = index
            },
            closePrize(){
                this.showToast = false;
            }
        },
        beforeDestroy(){
            clearInterval(this.timeid);
            clearTimeout(this.timer);
            clearTimeout(this.rowTime);
        }
        
    }
</script>

<style lang="scss" scoped>
@import "../../../assets/css/activity/BlindBox/BlindBox.scss"
</style>